<template>
    <el-container>
        <el-main>
            <MdPreview class="markdown-body" :dailyLog.id="id" :modelValue="dailyLog.text" />
            <MdCatalog :editorId="dailyLog.id" :scrollElement="scrollElement" :theme="dailyLog.theme" />
            <!-- <v-md-editor v-model="text" height="400px"></v-md-editor>
              -->
            <!-- <v-md-preview :include-level="[3, 4]" :text="text"></v-md-preview> -->
        </el-main>
        <!-- <el-aside>
            <MdCatalog :editorId="id" :scrollElement="scrollElement" />
        </el-aside> -->
    </el-container>


</template>

<script setup>
import { ref, defineProps, inject, watch, reactive } from 'vue';
import { MdPreview, MdCatalog } from 'md-editor-v3';
// preview.css相比style.css少了编辑器那部分样式
import 'md-editor-v3/lib/preview.css';
// import { DailyLog } from '../../interface/DailyLog';



const id = 'preview-only';
let text = ref('# Hello Editor V3! \n' + '# Hello Editor V3!');
const props = defineProps({
    dailyLog: {
        type: Object,
        default: () => {
            return {
                theme: 'dark',
                text: '标题',
                id: 'my-editor',
            }
        }
    }
})

let dailyLog = reactive(props.dailyLog);
console.log('dailyLog:', dailyLog)

let selectDate = inject('selectDate', new Date());

watch(selectDate, (newVal) => {
    console.log('selectDate:', newVal);
    text.value = '# Hello Editor V3!1111111111111111111111' + '\n' + newVal.date
});


const scrollElement = document.documentElement;
</script>

<style lang="scss" scoped>
.el-container {
    width: 100%;
}

.markdown-body {
    width: 100%;
}
</style>